<template>
	<view class="">
		<view class="bg-container">
			<image src="../../static/img/bizhi.jpg"></image>
		</view>
		<view class="add" @tap="add">
			<view style="margin-top: -18rpx;">+</view>
		</view>
		<view class="container">
			<!-- 头部导航栏 -->
			<view class="nav" >
				<view class="square" @click="changeSelect(0)"  :class="selected==0?'selected':''">广场</view>
				<view class="my" @click="changeSelect(1)" :class="selected==1?'selected':''">我的</view>
			</view>
			<!-- 记谱贴 -->
			<scroll-view @scrolltolower="onReachScollBottom" class="pu-container" scroll-y="true"
				bindscrolltolower="getMore">
				<view class="pu-item" v-for="(item,i) in comments" :key="i">
					<view class="info">
						<view class="avatar">
							<image :src="item.avatar"></image>
						</view>
						<view class="nickName">{{item.nickName}}</view>
					</view>
					<view class="content">
						<view class="text">{{item.comment}}</view>
						<view class="imgs">
							<view class="photo" v-for="(img,n) in item.imgs" :key="n" @tap="preview(n,i)" >
								<image mode="aspectFill" :src="img"></image>
							</view>
						</view>

					</view>
				</view>
				<view class="load-more" v-if="notHave">
					没有更多数据了
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				comments: [],
				page: 1,
				total: 0,
				selected: 0,
				notHave: false
			}
		},
		methods: {
			add(){
				this.$cantoPage('/pages/fapu/fapu')
			},
			preview(current,index) {
				let urls = this.comments[index].imgs
				current = urls[current]
				uni.previewImage({
					current,
					urls // 需要预览的图片http链接列表
				})
			},
			// 切换导航栏
			changeSelect(index) {
				this.selected = index
			},
			getComments(data) {
				return new Promise(async (resolve, reject) => {
					let ret = await this.$request({
						url: '/comment',
						data: data
					})
					resolve(ret)
				})
			},
			async setComments(data) {
				let that = this
				let ret = await that.getComments(data)
				ret.comments.forEach(ele => {
					if (ele.photo) {
						ele.imgs = ele.photo.split(',').map(img => that.$serverUrl + '/' + img)
					};
					if(ele.avatar.indexOf('http')==-1){
						ele.avatar = that.$serverUrl + '/' + ele.avatar
						}
				})
				that.comments.push(...ret.comments)
				that.total = ret.total[0].count
				if (that.comments.length >= that.total) {
					that.notHave = true
				}
			},
			onReachScollBottom() {
				if (this.notHave) return
				this.page++
				if (this.selected == 0) {
					this.setComments({
						page: this.page
					})
				} else {
					this.setComments({
						page: this.page,
						openId: JSON.parse(uni.getStorageSync('info'))["openid"]
					})
				}
			},
		},
		watch: {
			selected(e) {
				this.page = 1
				this.comments = []
				if (e == 0) {
					this.setComments({
						page: this.page
					})
				} else {
					this.setComments({
						page: this.page,
						openId: JSON.parse(uni.getStorageSync('info'))["openid"]
					})
				}
			}
		},
		onShow() {
			this.setComments({
				page: this.page
			})
		},
	}
</script>

<style>
	.bg-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}

	.bg-container>image {
		width: 100%;
		height: 100%
	}

	.add {
		width: 80rpx;
		height: 80rpx;
		background-color: #eaa53f;
		color: #fff;
		font-size: 80rpx;
		font-weight: bold;
		position: fixed;
		bottom: 160rpx;
		right: 30rpx;
		border-radius: 50%;
		text-align: center;
		z-index: 100;
	}

	.container {
		box-sizing: border-box;
		padding: 20rpx;
		height: 90vh;
		overflow: hidden;
	}

	.nav {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, .4);
		border-radius: 40rpx;
		position: fixed;
		top: 60rpx;
		left: 0;
	}

	.nav>view {
		display: inline-block;
		margin-right: 30rpx;
		box-sizing: border-box;
		padding: 10rpx;
		position: relative;
	}

	.nav>view.selected::after {
		content: '';
		border-bottom: 6rpx solid #788efd;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0
	}

	.pu-container {
		width: 100%;
		margin-top: 160rpx;
		box-sizing: border-box;
		padding: 20rpx;
		height: 98vh;
		overflow: hidden;
		padding-bottom: 260rpx;
	}

	.pu-item {
		margin-bottom: 20rpx;
	}

	.info {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.avatar {
		width: 10%;
	}

	.avatar image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.nickName {
		width: 85%
	}

	.imgs {
		display: flex;
		flex-wrap: wrap;
	}

	.content {
		background-color: rgba(255, 255, 255, .6);
		box-sizing: border-box;
		padding: 20rpx;
		width: 100%;
		border-radius: 10rpx;
	}

	.text {
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/*设置p元素最大4行，父元素需填写宽度才明显*/
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
	}

	.photo {
		box-sizing: border-box;
		/* padding: 20rpx; marma*/
		margin-left: 20rpx;
		margin-bottom: 20rpx;


	}

	.photo image {
		width: 183rpx;
		height: 240rpx;
	}

	.load-more {
		box-sizing: border-box;
		padding: 20rpx;
		text-align: center;
		color: #888;
	}
</style>
